<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("img").click(function(){
                // attr("属性名"):取值
                console.log("src属性:"+$(this).attr("src"));
                console.log("alt属性:"+$(this).attr("alt"));
                console.log("title属性:"+$(this).attr("title"));
                // attr("属性名","属性值"):赋值
                $(this).attr("src","../images/4.jpg");
                $(this).attr("title","编程真愉快");

                // 移除指定属性
                $(this).removeAttr("src");
            });
            $("#username").blur(function(){
                console.log("type属性:"+$(this).attr("type"));
                console.log("id属性:"+$(this).attr("id"));
                console.log("name属性:"+$(this).attr("name"));
                // console.log("value属性:"+$(this).attr("value"));
                // 在jquery1.9之后,访问表单元素的属性时必须通过prop来访问
                // console.log("value属性:"+$(this).prop("value"));
            });
            $("#btn").click(function(){
                console.log("type属性:"+$("input[name='hobbies']").prop("type"));
                console.log("name属性:"+$("input[name='hobbies']").prop("name"));
                console.log("value属性:"+$("input[name='hobbies']").prop("value"));
                console.log("checked属性:"+$("input[name='hobbies']").prop("checked"));


                // 为所有多选框默认全部选中
                $("input[name='hobbies']").prop("checked",true);
            });
        })
    </script>
</head>
<body>
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气真好"><br>
<input type="text" id="username" name="username" value="admin"><br>
<input type="checkbox" name="hobbies" value="eat" checked>吃饭
<input type="checkbox" name="hobbies" value="sleep">睡觉
<input type="checkbox" name="hobbies" value="beat">打豆豆
<button id="btn">测试</button>
</body>
</html>